<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>提交订单</title>

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 自定义css -->
    <link href="css/SubmitOdr.css" rel="stylesheet">
</head>

<body>
    <!-- 模态框：选择类型 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">选择订单类型</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" id="ws">批发采购</button>
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" id="sto">备货需求</button>
                </div>

            </div>
        </div>
    </div>

    <!-- 模态框：添加商品 -->
    <div class="modal fade" id="addItem">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加商品</h4>
                    <button type="button" class="close" data-dismiss="modal" onclick="getProducts()">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col">产品编码：<input type="text"></div>
                        <div class="col">产品型号：<input type="text"></div>
                        <div class="col">类目：
                            <select>
                                <option></option>
                                <option>电子</option>
                                <option>日用</option>
                                <option>服饰</option>
                                <option>化妆品</option>
                            </select>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-danger btn-sm" onclick="getProducts()">查询</button>
                        </div>
                    </div>
                    <br />
                    <!--表格-->
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>产品编码</th>
                                <th>产品型号</th>
                                <th>产品名称</th>
                                <th>类目</th>
                                <th>体积（m³)</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="modl">
                            <tr>
                                <td><input type="checkbox"></td>
                                <td id="pid"></td>
                                <td id="pmod"></td>
                                <td id="pname"></td>
                                <td id="ptype"></td>
                                <td id="pvol"></td>
                                <td><a href="#">查看详情</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="addToTable()">确定</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>

            </div>
        </div>
    </div>

    <!-- 模态框：提交成功 -->
    <div class="modal fade" id="subSuc">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">提交成功</h4>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">好</button>
                </div>

            </div>
        </div>
    </div>

    <!--顶栏-->
    <nav class="navbar navbar-dark fixed-top flex-md-nowrap p-0 shadow">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">万家乐 OCP</a>
        <div class="navbar-title">OCP 全渠道数字平台</div>
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" id="signoutl">未登录</a>&nbsp;&nbsp;
                <a class="nav-link" href="RetailerLogin.html" id="signout" onclick="delRtCookie(username)">注销</a>
            </li>
        </ul>
    </nav>


    <div class="container-fluid">
        <div class="row">
            <!--左侧栏-->
            <nav class="col-md-2 d-none d-md-block bg-light sidebar">
                <div class="sidebar-sticky">

                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="SubHome.html">
                                <span data-feather="home"></span>
                                首页 <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <span data-feather="file"></span>
                                1 提交订单
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="UnhandledOrders.html">
                                <span data-feather="shopping-cart"></span>
                                2 待处理订单
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="PurchaseOrders.html">
                                <span data-feather="users"></span>
                                3 采购订单
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="RetailOrders.html">
                                <span data-feather="bar-chart-2"></span>
                                4 零售订单
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!--内容部分-->
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
                <div
                    class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h5">广东万家乐燃气具有限公司采购申请</h1>
                </div>
                <div class="row">
                    <div class="col">客户名称：<span id="rtname">苏宁江苏店</span></div>
                    <div class="col">客户编码：<span id="rtid">GB2313231232</span></div>
                    <div class="col">店铺名称：<span id="rtstore">佳邦信息旗舰店</span></div>
                </div>
                <br />
                <div class="row">
                    <div class="col">区域：<span id="rtarea">热水事业部华南区</span></div>
                    <div class="col">提货方式：
                        <select name="picup" id="picup">
                            <option value="快递">快递</option>
                        </select>
                    </div>
                    <div class="col">出货仓库：
                        <select name="wh" id="whs">
                        </select>
                    </div>
                </div>
                <br />

                <div class="row" id="row3"></div>
                <br />

                <div class="row" id="row4">
                    <div class="col" id="reqtime">备货需求时间段：
                        <select name="year" id="yy">
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                        </select>&nbsp;年
                        <select name="month" id="mm">
                            <option value="01">1</option>
                            <option value="02">2</option>
                            <option value="03">3</option>
                            <option value="04">4</option>
                            <option value="05">5</option>
                            <option value="06">6</option>
                            <option value="07">7</option>
                            <option value="08">8</option>
                            <option value="09">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>&nbsp;月
                        <select name="day" id="dd">
                            <option value="01">上旬</option>
                            <option value="11">中旬</option>
                            <option value="20">下旬</option>
                        </select>
                    </div>
                    <div class="col">备注：<input type="text" id="rmk"></div>
                </div>
                <br /><br />

                <!--表格-->
                <div class="container">
                    <table class="table table-bordered">
                        <thead class="bg-light">
                            <tr>
                                <th>序号</th>
                                <th>产品编码</th>
                                <th>产品名称</th>
                                <th>品类</th>
                                <th>数量（件）</th>
                                <th>开票价（元）</th>
                                <th>金额（元）</th>
                                <th>体积（m³）</th>
                                <th>近三个月月均零售数量</th>
                                <th>近三个月月均零售销售额</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="pdout">
                            <tr id="item">
                                <td id="1">1</td>
                                <td id="pid"></td>
                                <td id="pname"></td>
                                <td id="ptype"></td>
                                <td id="pqty"></td>
                                <td></td>
                                <td id="pprice"></td>
                                <td id="pvol"></td>
                                <td></td>
                                <td></td>
                                <td><a href="#" id="del">删除</a></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="11"><a href="#" id="add">添加</a></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="bg-light">订单合计</td>
                                <td colspan="9">
                                    总数量：<span id="totalCount"></span>件 &nbsp;
                                    总体积：<span id="totalVol"></span>m³ &nbsp;
                                    总金额：<span id="totalPrice"></span>元 &nbsp;
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <br />

                <!--底部按钮-->
                <div id="btn">
                    <button type="button" class="btn btn-secondary cosbtn" disabled>上一步</button>
                    <button type="button" class="btn btn-danger cosbtn" onclick="submitOrder()">提交</button>
                    <button type="button" class="btn btn-outline-secondary cosbtn" onclick="saveOrder()">保存至待处理订单列表</button>
                </div>


            </main>
        </div>
    </div>


    <!-- Bootstrap JavaScript
    ================================================== -->
    <!-- 放在底部页面加载更快 -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- 自定义 js -->
    <script src="js/OCP.js"></script>
    <script src="js/SubmitOdr.js"></script>
</body>

</html>